<template>
  <view class="">
    <view v-if="list.length && hasLoaded" class="item" v-for="(item,i) in list" :key="i" @click="onClick(item)">
      <uni-card>
        <template v-slot:title>
          <view class="title">
            <text class="commitTime">发起时间：{{item.commitTime}}</text>
            <uni-tag v-show="item.auditStatus === 5" text="已通过" type="success" size='small'></uni-tag>
            <uni-tag v-show="item.auditStatus === 1" text="待审核" type="primary" size='small'></uni-tag>
            <uni-tag v-show="item.auditStatus === 3" text="审核中" type="warning" size='small'></uni-tag>
            <uni-tag v-show="item.auditStatus === 2 || item.auditStatus === 4" text="未通过" type="error"
              size='small'></uni-tag>
            <uni-tag v-show="item.auditStatus === 0" text="已撤销" style='background-color: #888;color: #fff;' type=""
              size='small'></uni-tag>
          </view>
        </template>
        <view>类型: {{getType(item)}}</view>
        <view>开始时间: {{item.startTime}}</view>
        <view>结束时间: {{item.endTime}}</view>
        <view>请假时长: {{item.duration}}天</view>
      </uni-card>
    </view>

    <view v-if="!list.length && hasLoaded">
      <empty />
    </view>

    <uni-load-more v-if='list.length >= this.form.pageSize' :status="loadStatus" />
  </view>

</template>

<script>
  //import {formateDates,getCurrentMonthFirst,getCurrentMonthLast} from "@/common/util.js"
  import empty from '../../components/empty.vue'
  import {
    LEAVE_ENUM
  } from '../../constants/constants'
  import {
    getAuditList
  } from '../../utils/api'

  export default {
    components: {
      empty
    },
    data() {
      return {
        loadStatus: 'more',
        list: [],
        total: 0,
        hasLoaded: false,
        form: {
          page: 1,
          pageSize: 10,
          auditType: 2
        }
      }
    },

    onLoad() {
      this.getList()
    },
    onPullDownRefresh() {
      this.form.page = 1
      this.getList()
    },
    onReachBottom() {
      console.log('onReachBottom')
      if (this.loadStatus === 'noMore') {
        return
      }
      this.form.page += 1
      this.getList()
    },
    methods: {
      async getList() {
        const res = await getAuditList(this.form)
        if (this.form.page === 1) {
          this.list = res
        } else {
          this.list.push(...res)
        }
        uni.stopPullDownRefresh()
        if (this.total < this.form.pageSize) {
          this.loadStatus = 'noMore'
        } else
        if (this.list.length >= this.total) {
          this.loadStatus = 'noMore'
        } else {
          this.loadStatus = 'more'
        }
        this.hasLoaded = true
      },
      getType(item) {
        return LEAVE_ENUM[item.leaveType]
      },
      onClick(item) {
        uni.navigateTo({
          url: '/pages/leaveDetail/leaveDetail?id=' + item.id
        })
      },
    }
  }
</script>

<style>
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border-bottom: 1rpx dashed #929292;
  }

  .commitTime {
    font-size: 28rpx;
  }
</style>